import {Component, ElementRef, Input, OnDestroy, OnInit, ViewChild} from '@angular/core';
import {MsgResult} from "../../../../models/msg-result";
import {MsgConstants} from "../../../../constants/constants";
import {ResponseUtil} from "../../../../util/response-util";
import {OneDialogService} from "../../../../widgets/one-dialog/one-dialog.service";
import {RealTimeService} from "./real-time.service";
import {FormBuilder, FormGroup} from "@angular/forms";
import {AlarmSubject} from "../../../../util/alarm-subject";
import {Subscription} from "rxjs/Subscription";
import {ActivatedRoute, Router} from "@angular/router";
import {StompService} from "@stomp/ng2-stompjs";
import {Message,Client} from '@stomp/stompjs';
import {Observable} from "rxjs/Observable";
import {RabbitConfig} from "../../../../app.config";
import {SitesService} from "../../../monitor/sites/sites.service";
import {SiteStatusSubject} from "../../../../util/site-status-subject";
import {alarmRouter} from "../../peach-constants";

declare var $;
declare var moment;
declare var BMap;
declare var BMapLib;
declare var mapv;
declare var echarts;
declare var INFOBOX_AT_TOP;
declare var BMAP_DRAWING_POLYGON;

@Component({
  selector: 'app-real-time',
  templateUrl: './real-time.component.html'
})
export class RealTimeComponent implements OnInit,OnDestroy {
  @ViewChild('siteSearchName') siteSearchName:ElementRef;

  map;
  heatmapOverlay;
  trafficCtrl;
  hotHeatTimer;
  lastInfo;
  mapvLayer;
  mapvLayerStatus;


  administrative: any = "";

  listName: string = "实时AQI";
  nullSiteList: string = "正在加载";
  selectorPointType: string = "allNationalSite";
  sitePointType: string = "allNationalSite";
  selectorFactor: string = "AQI";
  mapType : string = "map";
  chartSiteType : string = "";
  chartSiteCode : string = "";
  selectDate :　string = "";
  airFirstSite : string = "";
  isLoading: boolean = true;
  isVideo : boolean = false;
  isNormalMap : boolean = true;
  isAllNationSite : boolean = false;
  isTrack : boolean = false;
  isFirstHot : boolean = true;
  isTraffic :boolean = false;

  factorData: Array<any> = [];
  nationImg: Array<string> = [];
  smallAirImg: Array<string> = [];
  nationSmallImg : Array<string> = [];
  provinceImg : Array<string> = [];



  siteCacheArr: Array<any> = [];
  dateArray : Array<any> = [];
  trackHistoryArr : Array<any> = [];
  trackRealArr : Array<any> = [];
  clickNum: number = 1;
  count: number = 10;

  clickInfo;
  centerPoint;
  siteSearchForm : FormGroup;
  cityRealAQI : string = "";
  cityRealLevel : string = "";
  activeSiteCode : string = "";
  listTypeName : string = "监测类型";
  orderMethod : string = "severse";
  realAlarmDataArr :　Array<any> = [];
  historyAlertNum : number = 5;
  listTypeArr : Array<any> = [];
  circleArr : Array<any> = [];
  siteFenceArr : Array<any> = [];
  cityRanking = {dayRank:"",monthRank:"",yearRank:"",compositeRank:""};
  siteSearchArr : Array<any> = [];
  carTypeArr : Array<any> = [];
  factorLegendObj : any = {factorClass:[],factorName:[],note:[]}; //图例
  windDirective : any;
  lastRegionAreaOverlay;
  isSelectedArea: boolean = false;
  selectAreaData = {raiseDustNewSite:[],movingSource:[],industrySite:[]};

  private subscription: Subscription;
  public messages: Observable<Message>;

  private realStomp: any;
  private siteStatusArr: Array<any> = [];
  private siteStatusObj: any;
  private siteStatusSubscript: Subscription;

  constructor(
    private responseUtil: ResponseUtil,
    private dialogService: OneDialogService,
    private realTimeService: RealTimeService,
    private fb: FormBuilder,
    private alarmSubject : AlarmSubject,
    private siteStatusSubject : SiteStatusSubject,
    private router: Router,
    private route: ActivatedRoute,
  ) {
    this.buildForm();
    this.realStomp = new StompService(RabbitConfig);
  }

  ngOnInit() {
    this.initMap();
    this.initSiteStatus();
    this.initMapContentData();
    this.getUserSite();
    this.trafficControl();
    this.getRealAQIData();
    this.getCityRanking();
    this.initHeatDate();
    this.screenChange();
    this.inintRetractionAnimation();
    this.subscribeAlarm();
  }
  ngOnDestroy() {
    this.unSubscribeAlarm();
    this.unSubscribeSiteStatus();
  }
  /**
   * 数据订阅
   */
  private subscribeAlarm(){
    this.subscription = this.alarmSubject.subscribeData().subscribe(
      (data) => {
        console.log("数据订阅");
        this.realAlarmDataArr = data;
        let cloneStatusObj = {};
        for(const key in this.siteStatusObj){
          if(this.siteStatusObj.hasOwnProperty(key)){
            cloneStatusObj[key] = this.siteStatusObj[key];
          }
        }
        this.realAlarmDataArr.forEach((val) => {
          if(cloneStatusObj.hasOwnProperty(val.siteCode) && !cloneStatusObj[val.siteCode]){
            cloneStatusObj[val.siteCode] = true;
            this.siteStatusSubject.pushData(cloneStatusObj);
          }
        });
      }
    );
  }
  private unSubscribeAlarm(){
    console.log("取消订阅");
    if(this.subscription){
      this.subscription.unsubscribe();
    }
  }
  public setAckMessage = ( client, header ) => {
    if (!!header) {
      client.ack(header['message-id'],header.subscription,header);
      // message.ack();
    }
  };
  /**
   * 状态订阅
   */
  private subscribeSiteStatus(){
    this.siteStatusSubscript = this.siteStatusSubject.subscribeData().subscribe(
      (data) => {
        console.log("状态订阅");
        this.siteStatusObj = data;
        for(const key in data){
          if(data.hasOwnProperty(key)){
            const alarmElem = $('#'+key);
            if(data[key]){
              if(alarmElem.hasOwnProperty('length') && !alarmElem.hasClass("alarm")){
                let img = "";
                let pointImg = alarmElem.data("img");
                let pointType = alarmElem.data("point");
                if(pointImg &&　pointImg.indexOf('alert') == -1){
                  if(alarmElem.hasClass("nationalSite")){
                    let level = pointImg.split("national")[1];
                    img = 'ico-national-alert'+level;
                  }else if($('#'+data.siteCode).hasClass("smallAirSite")){
                    let level = pointImg.split("smallAir")[1];
                    img = 'ico-smallAir-alert'+level;
                  }else if($('#'+data.siteCode).hasClass("cityAirSite")){
                    let level = pointImg.split("province")[1];
                    img = 'ico-province-alert'+level;
                  }else{
                    img = 'ico-'+pointType+'-alert';
                  }
                }else{
                  img = pointImg;
                }
                alarmElem.addClass("alarm").parent().css("background","url(../../../../../assets/v1/css/peach/peachImg/" + img + ") no-repeat");
              }
            }
          }
        }
      }
    );
  }
  private unSubscribeSiteStatus(){
    console.log("取消状态订阅");
    if(this.siteStatusSubscript){
      let cloneStatusObj = {};
      for(const key in this.siteStatusObj){
        if(this.siteStatusObj.hasOwnProperty(key)){
          cloneStatusObj[key] = this.siteStatusObj[key];
        }
      }
      this.siteStatusSubject.pushData(cloneStatusObj);
      this.siteStatusSubscript.unsubscribe();
    }
  }
  /**
   * 初始化站点报警状态
   */
  initSiteStatus(){

  }
  /**
   * 初始化地图
   */
  initMap() {
    $("#realTimeMap").css("height", window.innerHeight - 50 + "px");
    $(".one-notbreadcrumb").css("height",window.innerHeight-50+"px");
    this.map = new BMap.Map("realTimeMap", {enableMapClick: false, minZoom: 5, maxZoom: 18});
    let centerPoint = new BMap.Point(113.658221, 34.780377);  // 创建点坐标
    this.map.centerAndZoom(centerPoint, 12);
    // 地图样式
    let mapStyle =[
      {
        "featureType": "land",
        "elementType": "geometry",
        "stylers": {
          "color": "#e7f7fc"
        }
      },
      {
        "featureType": "water",
        "elementType": "all",
        "stylers": {
          "color": "#96b5d6"
        }
      },
      {
        "featureType": "green",
        "elementType": "all",
        "stylers": {
          "color": "#b0d3dd"
        }
      },
      {
        "featureType": "highway",
        "elementType": "geometry.stroke",
        "stylers": {
          "color": "#d1c6a6"
        }
      },
      {
        "featureType": "highway",
        "elementType": "geometry.fill",
        "stylers": {
          "color": "#e6d9ab"
        }
      },
      {
        "featureType": "arterial",
        "elementType": "geometry.fill",
        "stylers": {
          "color": "#eeeeee"
        }
      },
      {
        "featureType": "arterial",
        "elementType": "geometry.stroke",
        "stylers": {
          "color": "#cccccc"
        }
      },
      {
        "featureType": "local",
        "elementType": "geometry.fill",
        "stylers": {
          "color": "#eeeeee"
        }
      },
      {
        "featureType": "water",
        "elementType": "geometry.fill",
        "stylers": {
          "color": "#b6c6de"
        }
      },
      {
        "featureType": "subway",
        "elementType": "all",
        "stylers": {
          "visibility": "off"
        }
      },
      {
        "featureType": "green",
        "elementType": "geometry.fill",
        "stylers": {
          "color": "#cddbd2"
        }
      },
      {
        "featureType": "land",
        "elementType": "all",
        "stylers": {
          "color": "#edf1f5"
        }
      },
      {
        "featureType": "administrative",
        "elementType": "geometry",
        "stylers": {
          "color": "#a7c8ec"
        }
      },
      {
        "featureType": "railway",
        "elementType": "all",
        "stylers": {
          "visibility": "off"
        }
      }
    ];//白底
    this.map.setMapStyle({styleJson: mapStyle});
    this.map.enableScrollWheelZoom();
    this.map.enableDragging();
    this.map.addEventListener("click",(e)=>{
      if(!(e.overlay && e.overlay.hasOwnProperty("content")) && this.lastInfo){
        this.lastInfo.close();
      }
      this.clearSelectAreaData();
      $(".one-peach-dropdown-menu").each(function(){
        $(this).hide().prev().hide();
      })
    })
  }
  /**
   * 屏幕大小改变
   */
  screenChange(){
    $(window).resize(function(){
      $("#realTimeMap").css("height", window.innerHeight - 50 + "px");
      $(".one-notbreadcrumb").css("height",window.innerHeight-50+"px");
    });
  }
  initMapContentData() {
    this.centerPoint = new BMap.Point(113.658221, 34.780377); //郑州
    this.nationImg = ["ico-national1.png", "ico-national2.png", "ico-national3.png", "ico-national4.png", "ico-national5.png", "ico-national6.png", "ico-national-alert7.png"];
    this.smallAirImg = ["ico-smallAir1.png", "ico-smallAir2.png", "ico-smallAir3.png", "ico-smallAir4.png", "ico-smallAir5.png", "ico-smallAir6.png", "ico-smallAir-alert7.png"];
    this.factorData = [{name:"实时AQI",factorName:"AQI"}, {name:"实时PM10",factorName:"PM10"}, {name:"实时PM2.5",factorName:"PM2.5"}, {name:"实时SO2",factorName:"SO2"}, {name:"实时NO2",factorName:"NO2"}, {name:"实时CO",factorName:"CO"}, {name:"实时O3",factorName:"O3"},{name:"温度",factorName:"TEMP"},{name:"湿度",factorName:"HUM"},{name:"风力风向",factorName:"WIND"}];
    this.nationSmallImg = ["S-H1.png","S-H2.png","S-H3.png","S-H4.png","S-H5.png","S-H6.png","S-H7.png"];
    this.provinceImg = ["ico-province1.png", "ico-province2.png", "ico-province3.png", "ico-province4.png", "ico-province5.png", "ico-province6.png", "ico-province-alert7.png"];
    this.factorLegendObj = {factorClass:["one-bg-level1","one-bg-level2","one-bg-level3","one-bg-level4","one-bg-level5","one-bg-level6"],factorName:["优","良","轻度污染","中度污染","重度污染","严重污染"],note:["<=50","51～100","101～150","151～200","200～300","301～500"]};
    this.windDirective = {"N":{name:"北风",direct:0},"NE":{name:"东北风",direct:45},"NW":{name:"西北风",direct:315},"E":{name:"东风",direct:90},"W":{name:"西风",direct:270},"S":{name:"南风",direct:180},"SE":{name:"东南风",direct:135},"SW":{name:"西南风",direct:225},"ESWN":{name:"旋风",direct:0}};
  }
  /*
   * 默认缩回动画
   */
  inintRetractionAnimation(){
    let elem = $(".one-peach-site-detail");
    let siteDetailHeight = elem.height();
    elem.animate({
      right:"-300px",
      bottom:siteDetailHeight-64+"px"
    },1500,()=>{
      $(".one-peach-site-toggle").removeClass("one-peach-site-toggle").addClass("one-peach-site-toggle-large").animate({
        left:"-84px"
      },500);
    });
    elem.siblings(".one-peach-factorLegend").animate({
      right:"20px"
    },1500);
  }
  /*
   * 获取用户包含的站点信息
   */
  getUserSite(){
    this.realTimeService.getUserSite().subscribe(
      result => this.responseUtil.success(result, this.handleUsetSiteResult),
      message => this.responseUtil.error(message)
    )
  }
  private handleUsetSiteResult = (result: MsgResult) => {
    this.isLoading = false;
    if (result && result.code == MsgConstants.MSG_CODE_OK) {
      this.progressUserSite(result.data);
    } else if (result && result.code != MsgConstants.MSG_CODE_OK) {
      this.dialogService.info(result.message);
    }
  };
  progressUserSite(data){
    if(data.length){
      if(data.indexOf("allNationalSite")!=-1){
        this.listTypeArr.push({"pointType": "nationalSite", "name": "国控站"});
        this.listTypeArr.push({"pointType": "cityAirSite", "name": "市控站"});
      }
      data.indexOf("smallAirSite")!=-1 && this.listTypeArr.push({"pointType": "smallAirSite", "name": "微型站"});
      data.indexOf("industrySite")!=-1 && this.listTypeArr.push({"pointType": "industrySite", "name": "工业废气"});
      data.indexOf("raiseDustSite")!=-1 && this.listTypeArr.push({"pointType": "raiseDustNewSite", "name": "工地"});
      this.listTypeArr.push({"pointType": "movingSource", "name": "移动源"});
      this.selectorPointType = this.listTypeArr[0].pointType;
      this.airFirstSite = this.selectorPointType;
      this.sitePointType = this.selectorPointType;
      this.getMapSiteInfo();
    }else{
      this.dialogService.info("暂无站点类型");
      this.nullSiteList = "暂无数据";
      $(".one-map-ranking-btn .btn").css("display","none");
    }
  }
  /**
   * 获取站点信息
   */
  getMapSiteInfo() {
    if(this.lastInfo){
      this.lastInfo.close();
    }
    let pointType = this.selectorPointType;
    this.realTimeService.getMapSiteData(pointType).subscribe(
      result => this.responseUtil.success(result, (result:MsgResult)=>{
        this.isLoading = false;
        if (result && result.code == MsgConstants.MSG_CODE_OK) {
          this.batchAddSite(result.data,pointType);
        } else if (result && result.code != MsgConstants.MSG_CODE_OK) {
          this.dialogService.info(result.message);
        }
      }),
      message => this.responseUtil.error(message)
    )
  }
  batchAddSite = (data,pointType) => {
    if(this.mapType == "map"){
      if (data && data.hasOwnProperty("siteList") && data.siteList.length) {
        let center;
        if(data.centerSite.lng && data.centerSite.lat){
          center = data.centerSite;
        }else{
          center = data.siteList[0];
        }
        let centerPoint;
        if (center.hasOwnProperty("Longitude")) {
          centerPoint = new BMap.Point(center.Longitude, center.Latitude);  // 创建点坐标
        } else {
          centerPoint = new BMap.Point(center.lng, center.lat);  // 创建点坐标
        }
        //删除圆形覆盖物
        if(pointType == "nationalSite" && this.circleArr.length){
          $.each(this.circleArr,(i,circle)=>{
            this.map.removeOverlay(circle);
          });
        }
        if(!this.siteFenceArr.length){
          this.getMapSiteFence();
        }
        this.map.centerAndZoom(centerPoint, this.map.getZoom());
        if (data.siteList.length) {
          let lowerFactor = this.selectorFactor.toLowerCase();
          lowerFactor == "pm2.5" && (lowerFactor="pm25");
          data.siteList.forEach((dataObj, i) => {
            dataObj.pointType = pointType;
            dataObj.factor = lowerFactor;
            this.mapLabel(dataObj);
          });
          if(pointType == "nationalSite" ){
            lowerFactor == "wind" && (lowerFactor="windSpeed");
            this.siteCacheArr = data.siteList.sort(this.compare(lowerFactor));
          }
          this.subscribeSiteStatus();
        } else {
          this.nullSiteList = "暂无数据"
        }
      } else {
        this.nullSiteList = "暂无数据";
      }
    }

  };
  compare = (prop) => {
    return function (obj1, obj2) {
      let val1 = obj1[prop];
      let val2 = obj2[prop];
      if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
        val1 = Number(val1);
        val2 = Number(val2);
      }else{
        val1 = String(val1);
        val2 = String(val2);
      }
      if (val1 < val2) {
        return 1;
      } else if (val1 > val2) {
        return -1;
      } else {
        return 0;
      }
    }
  };
  /**
   *移动源信息
   */
  getCarRealPoint(){
    this.mapvLayerStatus = "load";
    this.realTimeService.getCarRealPoint("0").subscribe(
      result => this.responseUtil.success(result,this.progressCarRealPoint),
      message => this.responseUtil.error(message)
    )
  }
  private progressCarRealPoint = (result: MsgResult) =>{
    this.isLoading = false;
    if (result && result.code == MsgConstants.MSG_CODE_OK) {
      this.showCarRealPoint(result.data);
    } else if (result && result.code != MsgConstants.MSG_CODE_OK) {
      this.dialogService.info(result.message);
    }
  };
  showCarRealPoint(data){
    if(this.mapType == 'map'){
      if(data && data.siteList && data.siteList.length){
        // data.siteList.forEach((data,i)=>{
        //   this.mapCarLabel(data);
        // })
        const carRealData = data.siteList || [];
        let img = new Image();
        img.src = '../../../../../assets/v1/css/peach/peachImg/icon-slag.png';
        // let alarmImg = new Image();
        // alarmImg.src = '../../../../../assets/themes/peach/peachImg/icon-slag-alert.png';
        let dataArr: Array<any> = [];
        carRealData.forEach(( data, i ) => {
          dataArr.push({
            geometry: {
              type: 'Point',
              coordinates: [data.lng,data.lat]
            },
            detail : data,
            icon : img
          })
        });
        let dataSet = new mapv.DataSet(dataArr);
        let options = {
          // methods: {
          //   click:  (item,event) => {
          //     console.log(item);
          //     // this.siteDetailInfo(item.detail);
          //   },
          //   mousemove: (item) => {
          //     if(item){
          //       this.map.setDefaultCursor('pointer');
          //     }else{
          //       this.map.setDefaultCursor('default');
          //     }
          //   }
          // },
          width: 32, // 规定图像的宽度
          height: 32, // 规定图像的高度
          // size: 5,
          draw: 'icon'
        };
        this.mapvLayer = new mapv.baiduMapLayer(this.map, dataSet, options);
        if(this.mapvLayerStatus == 'clear'){
          this.mapvLayer.destroy();
        }
      }
    }
  }

  /*
   * 站点标注
   */
  mapLabel(dataObj) {
    let point = new BMap.Point(dataObj.Longitude, dataObj.Latitude);
    let size, factorNum;
    let windHtml :string  = "";
    let wind : string = "";
    let windDeg :  number = 0;
    if(dataObj.windDirection &&　dataObj.windDirection!="-"){
      wind = dataObj.windDirection;
      if(this.windDirective.hasOwnProperty(wind)){
        windDeg = this.windDirective[wind].direct;
        dataObj.windDirection = this.windDirective[wind].name;
      }
    }
    if (dataObj.siteStatus == "1111") {
      if(dataObj.pointType == "nationalSite"){
        if(dataObj.factor == "wind"){
          factorNum = "";
          windHtml = '<span class="one-map-peach-wind" style="transform: rotate('+windDeg+'deg)"></span>';
          dataObj.activeNum = dataObj.windSpeed;
        }else{
          factorNum = dataObj[dataObj.factor];
          dataObj.activeNum = factorNum;
        }
        let i = dataObj.factor == "wind"? this.polluteLevel(dataObj.windSpeed,dataObj.factor) - 1: this.polluteLevel(factorNum,dataObj.factor) - 1;
        dataObj.className ="one-bg-level" + (i + 1);
        dataObj.img = this.nationImg[i];
        size = [53, 49];
      }else if(dataObj.pointType == "cityAirSite"){
        factorNum = "";
        let j = dataObj.factor == "wind"? this.polluteLevel(dataObj.windSpeed,dataObj.factor) - 1: this.polluteLevel(dataObj[dataObj.factor],dataObj.factor) - 1;
        dataObj.img = this.provinceImg[j];
        size = [20, 20];
      }else if(dataObj.pointType == "smallAirSite"){
        factorNum = "";
        let k = dataObj.factor == "wind"? this.polluteLevel(dataObj.windSpeed,dataObj.factor) - 1: this.polluteLevel(dataObj[dataObj.factor],dataObj.factor) - 1;
        dataObj.img = this.smallAirImg[k];
        size = [20, 20];
      }else {
        factorNum = "";
        dataObj.img = "ico-" + dataObj.pointType + ".png";
        dataObj.className = "one-bg-level-default";
        if(dataObj.pointType == "raiseDustNewSite"){
          let data = dataObj.pm10;
          let i = data <= 50 ? 1
            : data > 50 && data <= 150 ? 2
              : data > 150 && data <= 250 ? 3
                : data > 250 && data <= 350 ? 4
                  : data > 350 && data <= 420 ? 5
                    : data > 420 ? 6 : 7;
          dataObj.className = "one-bg-level" + i;
        }
        size = [20, 20];
      }
    } else {
      if(dataObj.pointType == "nationalSite"){
        dataObj.img = "ico-national-alert7.png";
        size = [40, 47];
      }else if(dataObj.pointType == "cityAirSite"){
        dataObj.img = "ico-province-alert7.png";
        size = [20, 20];
      }else if(dataObj.pointType == "smallAirSite"){
        dataObj.img = "ico-smallAir-alert7.png";
        size = [20, 20];
      }else{
        dataObj.img = "ico-" + dataObj.pointType + "-alert.png";
        size = [20, 20];
      }
      factorNum = dataObj.pointType == "nationalSite" ? "-" : "";
      dataObj.className = "one-bg-level7";
      dataObj.activeNum = "-";
    }
    let offset,labelNameHtml = "";
    if(dataObj.pointType == "nationalSite"){
      offset =  new BMap.Size(-size[0] / 2, -size[1]+6);
      let i = dataObj.factor == "wind"? this.polluteLevel(dataObj.windSpeed,dataObj.factor): this.polluteLevel(factorNum,dataObj.factor);
      labelNameHtml = "<div class='one-peach-site-label-name one-border-level"+i+"'>" + dataObj.siteName + "</div>";
      let circle1 = new BMap.Circle(point,1000,{
        "strokeColor":"#eea77c",
        "strokeWeight":2,
        "fillColor":"#eea77c",
        "fillOpacity":0.1,
      });
      this.circleArr.push(circle1);
      this.map.addOverlay(circle1);
      let circle3 = new BMap.Circle(point,3000,{
        "strokeColor":"#eea77c",
        "strokeWeight":2,
        "fillColor":"#eea77c",
        "fillOpacity":0.1,
      });
      this.map.addOverlay(circle3);
      this.circleArr.push(circle3);
    }else{
      offset = new BMap.Size(-size[0] / 2, -size[1]/2) ;
    }
    for(const key in this.siteStatusObj){
      if(this.siteStatusObj.hasOwnProperty(key) && key == dataObj.siteCode && this.siteStatusArr[key]){
        if(dataObj.img.indexOf('alert') == -1){
          if(dataObj.pointType == "nationalSite"){
            let level = dataObj.img.split("national")[1];
            dataObj.img = 'ico-national-alert'+level;
          }else if(dataObj.pointType == "smallAirSite"){
            let level = dataObj.img.split("smallAir")[1];
            dataObj.img = 'ico-smallAir-alert'+level;
          }else if(dataObj.pointType == "cityAirSite"){
            let level = dataObj.factor == "wind"? this.polluteLevel(dataObj.windSpeed,dataObj.factor) - 1: this.polluteLevel(dataObj[dataObj.factor],dataObj.factor) - 1;
            dataObj.img = 'ico-province-alert'+level;
          }else{
            dataObj.img = 'ico-'+dataObj.pointType;
          }
        }
      }
    }
    // this.siteStatusArr.forEach((val,i)=>{
    //   if(val.siteCode == dataObj.siteCode && val.siteStatus){
    //     if(dataObj.img.indexOf('alert') == -1){
    //       if(dataObj.pointType == "nationalSite"){
    //         let level = dataObj.img.split("national")[1];
    //         dataObj.img = 'ico-national-alert'+level;
    //       }else if(dataObj.pointType == "smallAirSite"){
    //         let level = dataObj.img.split("smallAir")[1];
    //         dataObj.img = 'ico-smallAir-alert'+level;
    //       }else if(dataObj.pointType == "cityAirSite"){
    //         let level = dataObj.factor == "wind"? this.polluteLevel(dataObj.windSpeed,dataObj.factor) - 1: this.polluteLevel(dataObj[dataObj.factor],dataObj.factor) - 1;
    //         dataObj.img = 'ico-province-alert'+level;
    //       }else{
    //         dataObj.img = 'ico-'+dataObj.pointType;
    //       }
    //     }
    //   }
    // });
    let myLabel = new BMap.Label(labelNameHtml+windHtml+"<span id='" + dataObj.siteCode + "' class='" + dataObj.pointType + " labelData" + "' style='color:#fff;display: inline-block;' data-point='"+dataObj.pointType+"' data-img='"+dataObj.img+"'>" + factorNum + "</span>",    //为lable填写内容
      {
        offset: offset,                     //label的偏移量，为了让label的中心显示在点上
        position: point
      });                                //label的位置
    myLabel.setStyle({                                   //给label设置样式，任意的CSS都是可以的
      maxWidth: size[0] + "px",
      width: size[0] + "px",  //宽
      display: "inline-block",
      fontSize: "14px",               //字号
      border: "0",                    //边
      height: size[1] + "px",                //高度
      textAlign: "center",            //文字水平居中显示
      lineHeight: size[1] - 8 + "px",
      background: "url(../../../../../assets/v1/css/peach/peachImg/" + dataObj.img + ") no-repeat",    //背景图片
      cursor: "pointer"
    });
    let title = "";
    title = dataObj.siteName;
    myLabel.setTitle(title);               //为label添加鼠标提示
    this.map.addOverlay(myLabel);
    myLabel.addEventListener("click", function () {
      this.siteDetailInfo(dataObj);
    }.bind(this))
  }
  /*
   * 车辆标注
   */
  mapCarLabel(dataObj) {
    let point = new BMap.Point(dataObj.lng, dataObj.lat);
    let size, factorNum;
    size = [32, 32];
    let myLabel = new BMap.Label("<span id='" + dataObj.deviceCode + "' class='" + "movingSource" + " labelData" + "' style='color:#fff;display: inline-block;margin-left: -3px;'></span>",    //为lable填写内容
      {
        offset: new BMap.Size(-size[0] / 2, -size[1]/2),                     //label的偏移量，为了让label的中心显示在点上
        position: point
      });                                //label的位置
    myLabel.setStyle({                                   //给label设置样式，任意的CSS都是可以的
      maxWidth: size[0] + "px",
      width: size[0] + "px",  //宽
      display: "inline-block",
      fontSize: "14px",               //字号
      border: "0",                    //边
      height: size[1] + "px",                //高度
      background: "url(../../../../../assets/v1/css/peach/peachImg/icon-slag.png) no-repeat",    //背景图片
      cursor: "pointer"
    });
    let title = "";
    title = dataObj.deviceName;
    myLabel.setTitle(title);               //为label添加鼠标提示
    this.map.addOverlay(myLabel);
  }
  /*
   *清除状态及数据
   */
  clearData() {
    this.isLoading = true;
    this.nullSiteList = "正在加载";
    this.trackHistoryArr = [];
    this.trackRealArr = [];
    this.clickNum = 1;
  }

  /*
   *清除所有标注
   */
  clearAllLabel() {
    this.map.clearOverlays();
  }

  /*
   *清除部分标注
   */
  clearPartLabel() {
    if (this.map.getOverlays().length) {
      if(this.selectorPointType == "movingSource"){
        if(this.mapvLayer){
          this.mapvLayer.destroy();
        }
        this.mapvLayerStatus = 'clear';
      }else{
        this.map.getOverlays().forEach((elem, i) => {
          if (elem.content && elem.content.indexOf(this.selectorPointType) != -1) {
            this.map.removeOverlay(elem);
          }
        })
      }
    }
  }

  /*
   * aqi等级
   */
  aqiLevel = (data) => {
    return data <= 50 ? 1
      : data > 50 && data <= 100 ? 2
        : data > 100 && data <= 150 ? 3
          : data > 150 && data <= 200 ? 4
            : data > 200 && data <= 300 ? 5
              : data > 300 ? 6 : 7;
  };
  /*
   * pollute等级
   */
  polluteLevel = (data,type) =>{
    let levelArr = [];
    if (type == "pm10") {
      levelArr = [50, 150, 250, 350, 500]
    } else if (type == "pm25") {
      levelArr = [35, 75, 115, 150, 250]
    } else if (type == "so2") {
      levelArr = [150, 500, 650, 800, 1600]
    } else if (type == "no2") {
      levelArr = [100, 200, 700, 1200, 2340]
    } else if (type == "co") {
      levelArr = [5, 10, 35, 60, 90]
    } else if (type == "o3") {
      levelArr = [160, 200, 300, 400, 800, 1200]
    } else if (type == "hum") {
      levelArr = [20, 40, 60, 80, 100]
    } else if (type == "temp") {
      levelArr = [0, 8, 16, 24, 32]
    } else if (type == "wind") {
      levelArr = [1, 2, 3, 4, 5, 6];
    } else {
      levelArr = [50, 100, 150, 200, 300];
    }
    return data <= levelArr[0] ? 1
      : data > levelArr[0] && data <= levelArr[1] ? 2
        : data > levelArr[1] && data <= levelArr[2] ? 3
          : data > levelArr[2] && data <= levelArr[3] ? 4
            : data > levelArr[3] && data <= levelArr[4] ? 5
              : data > levelArr[4] ? 6 : 7;
  }
  /*
   *站点类型点击
   */
  sitePointClick(siteContent, e) {
    this.selectorPointType = siteContent.pointType;
    if(siteContent.pointType == "nationalSite"){
      return false;
    }else{
      if ($(e.target).prev().is(":checked")) {
        $(e.target).prev().checked = false;
        this.clearPartLabel();
        if (this.sitePointType.indexOf(",") != -1) {
          if (this.sitePointType.indexOf(this.selectorPointType) == 0) {
            this.sitePointType = this.sitePointType.replace(siteContent.pointType + ",", "");
          } else {
            this.sitePointType = this.sitePointType.replace("," + siteContent.pointType, "");
          }
        }
        this.isLoading = false;
      } else {
        $(e.target).prev().checked = true;
        this.sitePointType += "," + siteContent.pointType;
        this.clearData();
        if(this.selectorPointType != "movingSource"){
          this.getMapSiteInfo();
        }else{
          this.getCarRealPoint();
        }
      }
    }
  }
  /**
   *根据站点类型与因子添加站点
   */
  updateSitePoint(){
    this.clearData();
    this.clearPartLabel();
    this.getMapSiteInfo();
  }
  /*
   *污染因子点击
   */
  factorTypeClick(factor,e) {
    $(e.target).parents(".one-peach-dropdown-menu").hide();
    this.isVideo = false;
    this.selectorFactor = factor.factorName;
    this.listName = factor.name;
    this.selectorPointType = "nationalSite";
    this.updateSitePoint();
    if(this.sitePointType.indexOf('smallAirSite') != -1){
      this.selectorPointType = "smallAirSite";
      this.updateSitePoint();
    }
    if(this.sitePointType.indexOf('cityAirSite') != -1){
      this.selectorPointType = "cityAirSite";
      this.updateSitePoint();
    }
    if(this.selectorFactor == 'AQI'){
      $(".one-pollute-factor-legend li").css("lineHeight","15px");
      this.factorLegendObj.factorName = ["优","良","轻度污染","中度污染","重度污染","严重污染"];
    }else{
      $(".one-pollute-factor-legend li").css("lineHeight","30px");
      if(this.selectorFactor == 'HUM'){
        this.factorLegendObj.factorName = ["0～20%","21～40%","41～60%","61～80%","81～100%","100%"];
      }else if(this.selectorFactor == 'TEMP'){
        this.factorLegendObj.factorName = ["0℃以下","0～8℃","9～16℃","17～24℃","25～32℃","32℃以上"];
      }else if(this.selectorFactor == 'WIND'){
        this.factorLegendObj.factorName = ["1级","2级","3级","4级","5级","6级以上"];
      }else{
        this.factorLegendObj.factorName = ["优","良","轻度污染","中度污染","重度污染","严重污染"];
      }
    }
  }

  /*
   *直观/普通点击
   */
  showSiteName(type, elem) {
    $(elem).addClass("active").siblings(".active").removeClass("active");
    if (type == "showName") {
      $(".one-peach-site-label-name").each(function () {
        $(this).show();
      });
    } else if (type == "normal") {
      $(".one-peach-site-label-name").each(function () {
        $(this).hide();
      });
    }
  }

  /*
   *下拉列表点击事件
   */
  dropDownClick(e){
    if($(e.target).siblings(".one-peach-dropdown-menu").css("display") == "none"){
      $(e.target).siblings(".one-peach-dropdown-menu").show().prev().show().parent().addClass("active");
    }else{
      $(e.target).siblings(".one-peach-dropdown-menu").hide().prev().hide().parent().removeClass("active");
    }
  }
  dropDownHide(e){
    $(e.target).children(".one-peach-dropdown-menu").hide().prev().hide().parent().removeClass("active");
  }

  /*
   *标注点击事件
   */
  siteDetailInfo(dataObj) {
    let siteDataHtml = "";
    if (dataObj.pointType == "smallAirSite" || dataObj.pointType == "nationalSite"|| dataObj.pointType == "cityAirSite") {
      siteDataHtml = this.allNationSiteSmallHtml(dataObj);
    } else if (dataObj.pointType == "industrySite") {
      siteDataHtml = this.industrySiteHtml(dataObj)
    } else if (dataObj.pointType == "raiseDustNewSite") {
      siteDataHtml = this.raiseDustHtml(dataObj);
    } else {

    }
    if(this.lastInfo){
      this.lastInfo.close();
    }
    let offset;
    if(dataObj.pointType == "nationalSite"){
      offset =  new BMap.Size(30, 38);
    }else{
      offset =  new BMap.Size(18, 16);
    }
    let infoBox = new BMapLib.InfoBox(this.map,siteDataHtml,{
      boxStyle:{
        background:"#fff",
        width: "380px"
      },
      offset: offset,
      closeIconMargin: "13px 7px 0 0",
      enableAutoPan: true,
      align: INFOBOX_AT_TOP,
      closeIconUrl:"../../../../../../assets/imgs/ico-close.png"
    });
    this.lastInfo = infoBox;
    let point = new BMap.Point(dataObj.Longitude, dataObj.Latitude);
    infoBox.open(point);
    let siteRealAlarmArr : Array<any> = [];
    this.realAlarmDataArr.forEach((data,i)=>{
      if(data.siteCode == dataObj.siteCode){
        siteRealAlarmArr.push(data);
      }
    });
    if(siteRealAlarmArr.length>0){
      $(".one-peach-info-alert").html('<i class="label-warning">'+siteRealAlarmArr.length+'</i>');
    }
    $(".one-peach-info .one-peach-info-alert").click((e)=>{
      this.clickInfo = e.target;
      let alertInfo  = $(this.clickInfo).parents(".one-peach-info-content").siblings(".one-peach-info-alert-content");
      if(alertInfo.css("display") == "none"){
        alertInfo.show();
        if(siteRealAlarmArr.length>0){
          siteRealAlarmArr.splice(3);
          this.showAlertData(siteRealAlarmArr,'real');
        }else{
          this.getHistoryAlertData(dataObj.siteCode);
        }
      }else{
        alertInfo.hide();
      }
    });
    $(".one-peach-info-loadmore").click(()=>{
      this.router.navigate([alarmRouter.alarmRecord]);
    });
    $('.one-peach-info .one-peach-info-alert-detail').on("click",'li',(e)=>{
      let elem = $(e.target);
      let contentid = elem.data('contentid') || elem.parent().data('contentid');
      let logid = elem.data('logid') || elem.parent().data('logid');
      this.updateRecordStatus(contentid,logid);
    });
    this.chartSiteType = dataObj.pointType;
    this.chartSiteCode = dataObj.siteCode;
    $(".one-peach-info-chart").html('<div id="siteDataChart" style="width: 360px;height: 180px;">正在加载</div>');
    if(this.chartSiteType == "nationalSite" || this.chartSiteType == "cityAirSite" || this.chartSiteType == "smallAirSite" || this.chartSiteType == "raiseDustNewSite"){
      this.getMapSiteDetailFive();
    }else{
      this.getMapSiteDetail();
    }
  }

  /**
   * 修改报警信息状态
   * @param result
   */
  updateRecordStatus(contentId,logId){
    this.realTimeService.putWarnSiteStatus(logId)
      .subscribe(
        result => this.responseUtil.success(result,()=>{
          if (result && result.code == MsgConstants.MSG_CODE_OK) {
            this.realAlarmDataArr.every((data,i)=>{
              if(data.contentId == contentId){
                this.realAlarmDataArr.splice(i,1);
                this.setAckMessage(data.client,data.mesHeader);
                return false;
              }
            });
            this.alarmSubject.pushData(this.realAlarmDataArr);
            this.router.navigate([alarmRouter.alarmDeal,{id: contentId,warnType:"warn"}]);
          }
          if (result && result.code != MsgConstants.MSG_CODE_OK) {
            this.dialogService.info(result.message);
          }
        }),
        error => this.responseUtil.error(error)
      );
  }

  /*
   *标准站/小型站详细信息
   */
  allNationSiteSmallHtml = (dataObj) => {
    dataObj.aqiLevelType = dataObj.aqiLevelType ? dataObj.aqiLevelType : "-";
    return`   
    <div class="one-peach-info">
      <div class="one-peach-info-header">
        <span>${dataObj.siteName}</span>
        <span class="text-sm">${dataObj.monitorTime}</span>
      </div>  
      <div class="one-peach-info-body">
        <div class="one-peach-info-content">    
          <div class="one-peach-info-content-header"><span>AQI：${dataObj.aqi}</span><span class="one-bg-level${this.aqiLevel(dataObj.aqi)} text-center">${dataObj.aqiLevelType}</span><span class="one-peach-info-alert"></span></div>  
          <div class="one-peach-info-content-body">
            <ul class="list-inline one-peach-content-factor">
              <li>
                <div>PM2.5</div>
                <div><span class="one-bg-level${this.aqiLevel(dataObj.pm25IAQI)}"></span><span>${dataObj.pm25}</span></div>
              </li>
              <li>
                <div>PM10</div>
                <div><span class="one-bg-level${this.aqiLevel(dataObj.pm10IAQI)}"></span><span>${dataObj.pm10}</span></div>
              </li>
              <li>
                <div>NO<sub>2</sub></div>
                <div><span class="one-bg-level${this.aqiLevel(dataObj.no2IAQI)}"></span><span>${dataObj.no2}</span></div>
              </li>
              <li>
                <div>SO<sub>2</sub></div>
                <div><span class="one-bg-level${this.aqiLevel(dataObj.so2IAQI)}"></span><span>${dataObj.so2}</span></div>
                
              </li>
              <li>
                <div>CO</div>
                <div><span class="one-bg-level${this.aqiLevel(dataObj.coIAQI)}"></span><span>${dataObj.co}</span></div>
              </li>
              <li>
                <div>O<sub>3</sub></div>
                <div><span class="one-bg-level${this.aqiLevel(dataObj.o3IAQI)}"></span><span>${dataObj.o3}</span></div>
              </li>  
            </ul>
            <ul class="list-inline one-peach-content-weather">
              <li>
                <div>温度：${dataObj.temp}&degC</div>
              </li>
              <li>
                <div>湿度：${dataObj.hum}%</div>
              </li>
              <li>
                <div>风力风向：${dataObj.windDirection}${dataObj.windSpeed}级</div>  
              </li>
            </ul>
          </div>
        </div>
        <div class="text-center" style="margin:5px 0;">近2小时五分钟污染数据</div>   
        <div class="one-peach-info-chart">
          <div id="siteDataChart"></div> 
        </div>
        <div class="one-peach-info-alert-content">
            <ul class="one-peach-info-alert-detail">
            </ul>
            <div style="width:100%;text-align: center;">
              <button class="btn one-peach-info-loadmore">更多数据</button>
            </div>
         </div> 
      </div>
    </div>
    `;
  };
  /*
   *工业废气详细信息
   */
  industrySiteHtml = (dataObj) => {
    return `
    <div class="one-peach-info">
      <div class="one-peach-info-header">
        <span>${dataObj.siteName}</span>
        <span class="text-sm">${dataObj.monitorTime}</span>
      </div>  
      <div class="one-peach-info-body">
        <div class="one-peach-info-content">
          <div class="one-peach-info-content-header">
            <span class="one-peach-info-alert"></span>
          </div>
          <div class="one-peach-info-content-body">
            <ul class="list-inline one-peach-content-device">  
              <li>
                <div>烟尘</div>
                <div><span>${dataObj.AvgStrength001}</span></div>
              </li>
              <li>  
                <div>SO<sub>2</sub></div>
                <div><span>${dataObj.AvgStrength002}</span></div>
              </li>
              <li>
                <div>NO<sub>x</sub></div>
                <div><span>${dataObj.AvgStrength003}</span></div>     
              </li>
            </ul>   
          </div>
        </div>
        <div class="text-center" style="margin:5px 0;">近12小时污染数据</div> 
        <div class="one-peach-info-chart">
          <div id="siteDataChart" ></div>
        </div>
        <div class="one-peach-info-alert-content">
            <ul class="one-peach-info-alert-detail">
            </ul>
            <div style="width:100%;text-align: center;">
              <button class="btn one-peach-info-loadmore">更多数据</button>
            </div>
         </div> 
      </div>
    </div>
    `;
  };
  /*
   *扬尘详细信息
   */
  raiseDustHtml = (dataObj) => {
    return `
    <div class="one-peach-info">
      <div class="one-peach-info-header">
        <span>${dataObj.siteName}</span>
        <span class="text-sm">${dataObj.monitorTime}</span>
      </div>  
      <div class="one-peach-info-body">
        <div class="one-peach-info-content">
          <div class="one-peach-info-content-header"><span class="one-peach-info-alert"></span></div>
          <div class="one-peach-info-content-body">
            <ul class="list-inline one-peach-content-device"> 
              <li>
                <div>PM10</div>
                <div><span>${dataObj.PM10}</span></div>
              </li>
              <li>
                <div>PM2.5</div>
                <div><span>${dataObj.PM2_5}</span></div>
              </li>
              <li>
                <div>喷淋装置</div>
                <div><span>正常</span></div>     
              </li>
              <li>
                <div>联动控制器</div>
                <div><span>开</span></div>        
              </li>
            </ul>
            <ul class="list-inline one-peach-content-weather">
              <li>
                <div>温度：${dataObj.temp}&degC</div>
              </li>
              <li>
                <div>湿度：${dataObj.hum}%</div>
              </li>
              <li>
                <div>风力风向：${dataObj.windDirection}${dataObj.windSpeed}级</div>  
              </li>
            </ul>
          </div>
        </div>
        <div class="text-center" style="margin:5px 0;">近12小时污染数据</div> 
        <div class="one-peach-info-chart">
          <div id="siteDataChart" style="width: 340px;height:235px ;"></div>
        </div> 
        <div class="one-peach-info-alert-content">
            <ul class="one-peach-info-alert-detail">
            </ul>
            <div style="width:100%;text-align: center;">
              <button class="btn one-peach-info-loadmore">更多数据</button>
            </div>
         </div> 
      </div>
    </div>
    `;
  };


  /*
   *获取2小时五分钟数据
   */
  getMapSiteDetailFive(){
    this.realTimeService.getMapSiteDetailFive(this.chartSiteType,this.chartSiteCode).subscribe(
      result => this.responseUtil.success(result,this.handleSiteDetailFive),
      message => this.responseUtil.error(message)
    );
  }
  private handleSiteDetailFive = (result: MsgResult) =>{
    if (result && result.code == MsgConstants.MSG_CODE_OK) {
      this.showSiteChartFive(result.data);
    }
    if (result && result.code != MsgConstants.MSG_CODE_OK) {
      this.dialogService.info(result.message);
    }
  };
  showSiteChartFive = (data) =>{
    if(data != null){
      if(this.chartSiteType == "nationalSite" || this.chartSiteType == "smallAirSite" || this.chartSiteType == "cityAirSite" || this.chartSiteType == "citySite" ){
        this.allNationSiteDataChart(data);
      }else if(this.chartSiteType == "raiseDustNewSite"){
        this.raiseDustSiteDataChart(data);
      }
    }else if(data == null){
      $(".one-peach-info-chart").html(' <div id="siteDataChart" style="width: 340px;height: 200px;">暂无数据</div>');
    }
  };
  /*
   *获取12小时数据
   */
  getMapSiteDetail(){
    this.realTimeService.getMapSiteDetail(this.chartSiteType,this.chartSiteCode).subscribe(
      result => this.responseUtil.success(result,this.handleSiteDetailResult),
      message => this.responseUtil.error(message)
    );
  }
  private handleSiteDetailResult = (result: MsgResult) =>{
    if (result && result.code == MsgConstants.MSG_CODE_OK) {
      this.showSiteChart(result.data);
    }
    if (result && result.code != MsgConstants.MSG_CODE_OK) {
      this.dialogService.info(result.message);
    }
  };
  showSiteChart = (data) =>{
    if(data != null){
      if(this.chartSiteType == "industrySite"){
        this.industrySiteDataChart(data);
      }
    }else if(data == null){
      $(".one-peach-info-chart").html(' <div id="siteDataChart" style="width: 340px;height: 200px;">暂无数据</div>');
    }
  };
  /*
   *12小时数据图表
   */
  //    小型站、标准站
  allNationSiteDataChart = (dataList) => {
    let siteDataChart = echarts.init(document.getElementById('siteDataChart'));
    let siteDataOption = {
      tooltip: {
        trigger: 'axis'
      },
      grid:{
        right:8,
        left:38,
        top:40,
        bottom:40
      },
      color:["#49D3C7","#83B9D7","#81C8AC","#1A7853","#23A974","#51635C","#49D374"],
      legend:{
        data:["AQI","PM10","PM2.5","SO2","NO2","CO","O3"],
        textStyle: {
          color: "#838385"
        },
        selectedMode: "single",
        // orient:"vertical",
        left:"auto",
        right:"auto",
        itemWidth:9,
        itemHeight:9
      },
      xAxis: {
        type: 'category',
        nameGap: "20",
        nameLocation: "start",
        splitLine: {
          show: false
        },
        data: dataList.time,
        axisLine: {
          lineStyle: {
            color: "#919191"
          }
        },
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          textStyle: {
            color: "#79797B"
          }
        },
        boundaryGap: true
      },
      yAxis: {
        type: 'value',
        splitLine: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: "#919191"
          }
        },
        axisLabel: {
          textStyle: {
            color: "#79797B"
          }
        }
      },
      series: [
        {
          name: 'AQI',
          type: 'bar',
          smooth: true,
          symbolSize: 6,
          barWidth: "7",
          data: this.barColor(dataList.aqi, "aqi"),
          label: {
            normal: {
              show: false,
              position: "top",
              textStyle: {
                color: "#49D3C7"
              }
            }
          }
        },
        {
          name: 'PM2.5',
          type: 'bar',
          smooth: true,
          symbolSize: 6,
          barWidth: "7",
          data: this.barColor(dataList.pm25, "pm25"),
          label: {
            normal: {
              show: false,
              position: "top",
              textStyle: {
                color: "#81C8AC"
              }
            }
          }
        },
        {
          name: 'PM10',
          type: 'bar',
          smooth: true,
          symbolSize: 6,
          barWidth: "7",
          data: this.barColor(dataList.pm10, "pm10"),
          label: {
            normal: {
              show: false,
              position: "top",
              textStyle: {
                color: "#83B9D7"
              }
            }
          }
        },
        {
          name: 'SO2',
          type: 'bar',
          smooth: true,
          symbolSize: 6,
          barWidth: "7",
          data: this.barColor(dataList.so2, "so2"),
          label: {
            normal: {
              show: false,
              position: "top",
              textStyle: {
                color: "#1A7853"
              }
            }
          }
        },
        {
          name: 'CO',
          type: 'bar',
          smooth: true,
          symbolSize: 6,
          barWidth: "7",
          data: this.barColor(dataList.co, "co"),
          label: {
            normal: {
              show: false,
              position: "top",
              textStyle: {
                color: "#51635C"
              }
            }
          }
        },
        {
          name: 'NO2',
          type: 'bar',
          smooth: true,
          symbolSize: 6,
          barWidth: "7",
          data: this.barColor(dataList.no2, "no2"),
          label: {
            normal: {
              show: false,
              position: "top",
              textStyle: {
                color: "#23A974"
              }
            }
          }
        },
        {
          name: 'O3',
          type: 'bar',
          smooth: true,
          symbolSize: 6,
          barWidth: "7",
          data: this.barColor(dataList.o3, "o3"),
          label: {
            normal: {
              show: false,
              position: "top",
              textStyle: {
                color: "#49D374"
              }
            }
          }
        }
      ]
    };
    siteDataChart.setOption(siteDataOption);
  };
  //工业废气
  industrySiteDataChart = (dataList) => {
    let siteDataChart = echarts.init(document.getElementById('siteDataChart'));
    let siteDataOption = {
      tooltip: {
        trigger: 'axis'
      },
      grid:{
        right:8,
        left:38,
        top:40,
        bottom:40
      },
      legend: {
        data : ["烟尘","SO2","NOx"],
        textStyle: {
          color: "#838385"
        },
        selectedMode: "single",
        itemWidth:9,
        itemHeight:9
      },
      xAxis: {
        type: 'category',
        nameGap: "20",
        nameLocation: "start",
        splitLine: {
          show: true
        },
        data: dataList.time,
        axisLine: {
          lineStyle: {
            color: "#919191"
          }
        },
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          textStyle: {
            color: "#79797B"
          }
        },
        boundaryGap: true
      },
      yAxis: {
        type: 'value',
        splitLine: {
          show: true
        },
        axisLine: {
          lineStyle: {
            color: "#919191"
          }
        },
        axisLabel: {
          textStyle: {
            color: "#79797B"
          }
        }
      },
      series: [
        {
          name: '烟尘',
          type: 'bar',
          smooth: true,
          symbolSize: 6,
          barWidth: "7",
          data: dataList.AvgStrength001,
          itemStyle: {
            normal: {
              color: "#49D3C7"
            }
          },
          label: {
            normal: {
              show: false,
              position: "top"
            }
          }
        },
        {
          name: 'SO2',
          type: 'bar',
          smooth: true,
          symbolSize: 6,
          barWidth: "7",
          data: dataList.AvgStrength002,
          itemStyle: {
            normal: {
              color: "#81C8AC"
            }
          },
          label: {
            normal: {
              show: false,
              position: "top"
            }
          }
        },
        {
          name: 'NOx',
          type: 'bar',
          smooth: true,
          symbolSize: 6,
          barWidth: "7",
          data: dataList.AvgStrength003,
          itemStyle: {
            normal: {
              color: "#83B9D7"
            }
          },
          label: {
            normal: {
              show: false,
              position: "top"
            }
          }
        }
      ]
    };
    siteDataChart.setOption(siteDataOption);
  };
  //扬尘
  raiseDustSiteDataChart = (dataList) => {
    let siteDataChart = echarts.init(document.getElementById('siteDataChart'));
    let siteDataOption = {
      tooltip: {
        trigger: 'axis'
      },
      grid:{
        right:8,
        left:38,
        top:40,
        bottom:40
      },
      legend: {
        data:["PM10","PM2.5"],
        textStyle: {
          color: "#838385"
        },
        selectedMode: "single",
        itemWidth:9,
        itemHeight:9
      },
      color: ["#49D3C7", "#81C8AC"],
      xAxis: {
        type: 'category',
        nameGap: "20",
        nameLocation: "start",
        splitLine: {
          show: true
        },
        data: dataList.time,
        axisLine: {
          lineStyle: {
            color: "#919191"
          }
        },
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          textStyle: {
            color: "#79797B"
          }
        },
        boundaryGap: true
      },
      yAxis: {
        type: 'value',
        splitLine: {
          show: true
        },
        axisLine: {
          lineStyle: {
            color: "#919191"
          }
        },
        axisLabel: {
          textStyle: {
            color: "#79797B"
          }
        }
      },
      series: [
        {
          name: 'PM10',
          type: 'bar',
          smooth: true,
          symbolSize: 6,
          barWidth: "7",
          data: this.barColor(dataList.pm10, "pm10"),
          label: {
            normal: {
              show: false,
              position: "top",
              textStyle: {
                color: "#49D3C7"
              }
            }
          }
        },
        {
          name: 'PM2.5',
          type: 'bar',
          smooth: true,
          symbolSize: 6,
          barWidth: "7",
          data: this.barColor(dataList.pm25, "pm25"),
          label: {
            normal: {
              show: false,
              position: "top",
              textStyle: {
                color: "#81C8AC"
              }
            }
          }
        }
      ]
    };
    siteDataChart.setOption(siteDataOption);
  };
  //污染等级颜色
  aqiColor = (data, type) => {
    let color = "#9B9B9B";
    let levelArr = [];
    if (type == "pm10") {
      levelArr = [50, 150, 250, 350, 500]
    } else if (type == "pm25") {
      levelArr = [35, 75, 115, 150, 250]
    } else if (type == "so2") {
      levelArr = [150, 500, 650, 800, 1600]
    } else if (type == "no2") {
      levelArr = [100, 200, 700, 1200, 2340]
    } else if (type == "co") {
      levelArr = [5, 10, 35, 60, 90]
    } else if (type == "o3") {
      levelArr = [160, 200, 300, 400, 800, 1200]
    } else {
      levelArr = [50, 100, 150, 200, 300]
    }
    color = data <= levelArr[0] ? "#61D800"
      : data > levelArr[0] && data <= levelArr[1] ? "#CCB21A"
        : data > levelArr[1] && data <= levelArr[2] ? "#F5A623"
          : data > levelArr[2] && data <= levelArr[3] ? "#F12F1C"
            : data > levelArr[3] && data <= levelArr[4] ? "#9C0D71"
              : data > levelArr[4] ? "#630445" : "#9B9B9B";
    return color;
  };
  //根据数据显示柱状图
  barColor(datas, type) {
    let barData = [];
    $.each(datas, function (i, data) {
      let dataColor = this.aqiColor(data, type);
      let rankingData = {
        value: data,
        itemStyle: {
          normal: {
            color: dataColor
          }
        }
      };
      barData.push(rankingData)
    }.bind(this));
    return barData;
  }

  //地图类型点击
  mapTypeRadioClick = (mapType,e) => {
    if( this.mapType == mapType){
      return false;
    }
    this.stopHotInterval();
    $(".one-heatMap-container").hide();
    $(".mapSearch").hide();
    $(".heatMapDate").hide();
    $(".one-peach-site-detail").hide();
    $(".one-peach-factorLegend").hide();
    $(e.target).parents(".one-peach-dropdown").removeClass("one-peach-tool");
    this.mapType = mapType;
    this.clearAllLabel();
    this.clearData();
    if(mapType == "map"){
      if(this.siteFenceArr.length){
        this.siteFenceArr.forEach((fence,i)=>{
          this.map.addOverlay(fence);
        })
      }
      $(".one-peach-site-detail").show();
      $(".one-peach-factorLegend").show();
      $(".mapSearch").show();
      this.listTypeName = "站点";
      this.map.setZoom(12);
      this.isNormalMap  = true;
      this.isAllNationSite = false;
      this.isTrack = false;
      this.selectorPointType = this.airFirstSite;
      this.sitePointType = this.selectorPointType;
      this.getMapSiteInfo();
    }else if(mapType == "heatMap"){
      $(e.target).parents(".one-peach-dropdown").addClass("one-peach-tool");
      $(".heatMapDate").show();
      this.isTrack = false;
      this.isNormalMap  = false;
      this.isAllNationSite = false;
      this.isLoading = false;
      this.map.setMinZoom(6);
      this.map.setZoom(10);
      this.map.centerAndZoom(this.centerPoint,this.map.getZoom());
      this.isFirstHot = true;
      if(this.isFirstHot){
        this.heatMapTimeSwiper();
      }
      this.initHeatMap();
      $(".one-heatMap-container").show();
    }
  };
  /*
   * 格式化日期
   */
  formatDateInfo(elem){
    //配置信息
    let config = {
      singleDatePicker: true,
      locale:{
        format:"YYYY-MM-DD",
        separator: " 至 ",
        applyLabel : '确定',
        cancelLabel : '取消',
        fromLabel: '从',
        toLabel: '到',
        weekLabel: 'W',
        customRangeLabel: 'Custom Range',
        daysOfWeek:["日","一","二","三","四","五","六"],
        monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
        firstDay:1
      },
      startDate: new Date(),
      endDate: new Date(),
      maxDate: new Date()
    };
    $(elem).daterangepicker(config).on('hide.daterangepicker', function() {
    });
  }
  /*
   * 格式热力图化日期
   */
  initHeatDate(){
    let config = {
      locale:{
        format:"YYYY-MM-DD",
        separator: " 至 ",
        applyLabel : '确定',
        cancelLabel : '取消',
        fromLabel: '从',
        toLabel: '到',
        weekLabel: 'W',
        customRangeLabel: 'Custom Range',
        daysOfWeek:["日","一","二","三","四","五","六"],
        monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
        firstDay:1
      },
      dateLimit : {
        days : 7
      },
      showWeekNumbers:false,
      startDate: new Date(),
      endDate: new Date(),
      maxDate: new Date()
    };
    $("#heatMapDate").daterangepicker(config);
  }
  /*
   * 热力图
   */
  initHeatMap(){
    this.isFirstHot = false;
    console.log("热力图");
    if (!this.isSupportCanvas()) {
      alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')
    }
    this.heatmapOverlay = new BMapLib.HeatmapOverlay({"radius": 60});
    this.map.addOverlay(this.heatmapOverlay);
    this.heatmapOverlay.show();
    this.setGradient();
    this.heatmapOverlay.setDataSet({data: [], max: 350});
    this.trackHotHeatData();
  }
  /*
   * 获取热力图数据
   */
  trackHotHeatData(){
    this.realTimeService.getHotHeatData(this.selectDate).subscribe(
      result => this.responseUtil.success(result,this.handleTrackHotHeatResult),
      message => this.responseUtil.error(message)
    )
  }
  private handleTrackHotHeatResult = (result: MsgResult) =>{
    if (result && result.code == MsgConstants.MSG_CODE_OK) {
      this.showTrackHotHeat(result.data);
    }
    if (result && result.code != MsgConstants.MSG_CODE_OK) {
      this.dialogService.info(result.message);
    }
  };
  showTrackHotHeat(data){
    let points = [];
    data.hotPointList.forEach((data,i)=>{
      points.push({lng:data.lng,lat:data.lat,count:data.AQI});
    });
    if(points.length){
      this.map.centerAndZoom(new BMap.Point(points[0].lng,points[0].lat));
    }else{
      this.map.centerAndZoom(new BMap.Point(113.658221, 34.780377),this.map.getZoom());
    }
    this.heatmapOverlay.setDataSet({data: points, max: 350});
  }
  heatMapTimeLineData(){
    let dateArray = [];
    for (let i = 1; i < 25; i++) {
      let date = moment().subtract(i,"h").format("YYYY-MM-DD HH:00:00");
      dateArray.push(date);
    }
    dateArray = dateArray.reverse();
    return dateArray;
  }

  heatMapTimeSwiper(){
    this.dateArray = this.heatMapTimeLineData();
    this.selectDate = this.dateArray[23];
  }
  /*
   * 时间线点击事件点
   */
  clickHotTimeLine(date,elem){
    this.selectDate = date;
    this.trackHotHeatData();
    this.stopHotInterval();
    if($(elem).parent().find(".fa").hasClass("fa-pause")){
      $(elem).parent().find(".fa").addClass("fa-play").removeClass("fa-pause");
      this.stopHotInterval();
    }
  }
  /*
   * 轮播热力图
   */
  loopHotHeat(){
    if(this.selectDate == this.dateArray[23]){
      this.selectDate = this.dateArray[0];
    }else{
      let i = this.dateArray.indexOf(this.selectDate);
      this.selectDate = this.dateArray[i+1];
    }
    this.trackHotHeatData();
  }
  startHotInterval(){
    this.hotHeatTimer = setInterval(this.loopHotHeat.bind(this),2000 );
  }
  stopHotInterval(){
    clearInterval(this.hotHeatTimer);
  }
  /*
   * 开始/暂停轮播
   */
  playOrPauseHotInterval(elem){
    if($(elem).find(".fa").hasClass("fa-play")){
      this.startHotInterval();
      $(elem).find(".fa").removeClass("fa-play").addClass("fa-pause");
    }else{
      $(elem).find(".fa").addClass("fa-play").removeClass("fa-pause");
      this.stopHotInterval();
    }
  }
  /*
   * 开始/判断浏览区是否支持canvas
   */
  isSupportCanvas() {
    let elem = document.createElement('canvas');
    return !!(elem.getContext && elem.getContext('2d'));
  }
  setGradient() {
    /*格式如下所示:
     {
     0:'rgb(102, 255, 0)',
     .5:'rgb(255, 170, 0)',
     1:'rgb(255, 0, 0)'
     }*/
    let gradient = {
      "0.35": '#72ff00',
      "0.45": '#ffff00',
      "0.55": '#E07B00',
      "0.65": '#F12F1C',
      "0.95": '#9C0D71',
      "1": '#59003D'
    };
    this.heatmapOverlay.setOptions({"gradient": gradient});
  }

  /**
   *路况
   */
  trafficControl(){
    this.trafficCtrl = new BMapLib.TrafficControl();
    this.map.addControl(this.trafficCtrl);
  }
  trafficBtnClick(){
    if(this.isTraffic){
      this.isTraffic = false;
      this.trafficCtrl.hideTraffic();
    }else{
      this.isTraffic = true;
      this.trafficCtrl.showTraffic();
    }
  }
  refreshTraffic(){
    if(this.isTraffic){
      this.trafficCtrl.showTraffic();
    }
  }
  //测距
  distanceTool(e){
    let disTool = new BMapLib.DistanceTool(this.map, {lineStroke : 2});
    disTool.open();
  }
  /**
   *电子围栏
   */
  getMapSiteFence(){
    this.realTimeService.getMapSiteFence().subscribe(
      result => this.responseUtil.success(result,this.progressSiteFence),
      message => this.responseUtil.error(message)
    )
  }
  private progressSiteFence = (result: MsgResult) =>{
    if (result && result.code == MsgConstants.MSG_CODE_OK) {
      this.showSiteFence(result.data);
    } else if (result && result.code != MsgConstants.MSG_CODE_OK) {
      this.dialogService.info(result.message);
    }
  };
  showSiteFence(data){
    if(data && data.length){
      data.forEach((value,i)=>{
        let key = Object.keys(value)[0];
        let pointArr : Array<any> = [];
        value[key].forEach((point,i)=>{
          pointArr.push(new BMap.Point(point.lon,point.lat))
        });
        let polygon = new BMap.Polygon(pointArr, {fillColor:"#ad49e2", strokeColor:"transparent",strokeWidth:0, fillOpacity:0.28});  //创建多边形
        this.map.addOverlay(polygon);   //增加多边形
        this.siteFenceArr.push(polygon);
      });
    }
  }

  /**
   *站点搜索
   */
  buildForm() : void{
    this.siteSearchForm = this.fb.group({
      'siteName' : [""]
    });

    this.siteSearchForm.valueChanges.subscribe(
      data => this.onValueChanged(data)
    );
    this.onValueChanged();
  }
  /**
   * 值变化监听
   * @param data
   */
  onValueChanged(data?: any) {
    if (!this.siteSearchForm) {
      return;
    }
    if(this.siteSearchName){
      this.getMapSiteSearch(this.siteSearchName.nativeElement)
    }
  }
  siteNameFocus(e){
    if(e.target.value){
      this.getMapSiteSearch(e.target);
    }else{
      this.siteSearchArr = [];
    }
  }
  getMapSiteSearch(elem){
    this.activeSiteCode = "";
    $(elem).parent().next().show();
    $(elem).parent().siblings(".one-peach-dropdown-menu").show();
    $(".one-map-marker-site-hint").removeClass("one-map-marker-site-hint");
    if(elem.value){
      this.realTimeService.getMapSiteSearch(elem.value,this.sitePointType).subscribe(
        result => this.responseUtil.success(result,this.progressSiteSearch),
        message => this.responseUtil.error(message)
      )
    }else{
      this.siteSearchArr = [];
    }
  }
  private progressSiteSearch = (result: MsgResult) =>{
    if (result && result.code == MsgConstants.MSG_CODE_OK) {
      this.showSiteSearch(result.data);
    } else if (result && result.code != MsgConstants.MSG_CODE_OK) {
      this.dialogService.info(result.message);
    }
  };
  showSiteSearch(data){
    if(data && data.length){
      this.activeSiteCode = data[0].siteCode;
      this.siteSearchArr = data;
    }
  }
  selectSearchSite(searchData){
    let point = new BMap.Point(searchData.Longitude,searchData.Latitude);
    this.siteSearchForm.patchValue({siteName:searchData.siteName});
    this.activeSiteCode = searchData.siteCode;
    $("#"+this.activeSiteCode).parent().addClass("one-map-marker-site-hint").siblings().removeClass("one-map-marker-site-hint");
    this.siteSearchArr = [];
    this.map.centerAndZoom(point,this.map.getZoom());
  }
  /**
   *历史报警信息
   */
  getHistoryAlertData(siteCode){
    this.realTimeService.getHistoryAlertData(siteCode,this.historyAlertNum).subscribe(
      result => this.responseUtil.success(result,this.progressAlertData),
      message => this.responseUtil.error(message)
    )
  }
  private progressAlertData= (result: MsgResult) =>{
    if (result && result.code == MsgConstants.MSG_CODE_OK) {
      this.showAlertData(result.data,'');
    } else if (result && result.code != MsgConstants.MSG_CODE_OK) {
      this.dialogService.info(result.message);
    }
  };
  showAlertData(data,type){
    if(data &&　data.length){　
      let html = "";
      data.forEach((val,i)=>{
        html += `
        <li class="${type}" data-contentid = ${val.contentId} data-logid = ${val.logId} >  
          <div>${val.time || val.sendTime}</div> 
          <div>
            ${val.content}  
          </div>
        </li>  
        `
      });
      $(this.clickInfo).parents(".one-peach-info-content").siblings(".one-peach-info-alert-content").children(".one-peach-info-alert-detail").html(html);
    }else{
      $(this.clickInfo).parents(".one-peach-info-content").siblings(".one-peach-info-alert-content").find(".btn").text("暂无数据");
    }
  }
  /**
   *实时AQI
   */
  getRealAQIData(){
    this.realTimeService.getRealAQIData().subscribe(
      result => this.responseUtil.success(result,this.progressSiteAQI),
      message => this.responseUtil.error(message)
    )
  }
  private progressSiteAQI = (result: MsgResult) =>{
    if (result && result.code == MsgConstants.MSG_CODE_OK) {
      this.showSiteAQI(result.data);
    } else if (result && result.code != MsgConstants.MSG_CODE_OK) {
      this.dialogService.info(result.message);
    }
  };
  showSiteAQI(data){
    if(data.hasOwnProperty("aqi")){
      this.cityRealAQI = data.aqi;
      this.cityRealLevel = data.aqiLevelType;
    }
  }
  /**
   *修改排名顺序
   */
  changeOrderMethod(){
    if(this.orderMethod == "severse"){
      this.orderMethod = 'positive';
    }else{
      this.orderMethod = 'severse';
    }
    this.getCityRanking();
  }
  /**
   *城市排名
   */
  getCityRanking(){
    this.realTimeService.getCityRanking(this.orderMethod).subscribe(
      result => this.responseUtil.success(result,this.progressCityRanking),
      message => this.responseUtil.error(message)
    )
  }
  private progressCityRanking = (result: MsgResult) =>{
    if (result && result.code == MsgConstants.MSG_CODE_OK) {
      this.showCityRanking(result.data);
    } else if (result && result.code != MsgConstants.MSG_CODE_OK) {
      this.dialogService.info(result.message);
    }
  };
  showCityRanking(data){
    let text : string = '';
    text = this.orderMethod == 'severse' ? '倒' : '';
    this.cityRanking.dayRank = text+data.rank74List.dayRank.rank;
    this.cityRanking.monthRank = text+data.rank74List.monthRank.rank;
    this.cityRanking.yearRank = text+data.rank74List.yearRank.rank;
    this.cityRanking.compositeRank = text+data.rank74List.realRank74.rank;
  }
  /**
   *收缩站点详情
   */
  shrinkSiteDetail(e){
    let siteDetailHeight = $(e.target).parents(".one-peach-site-detail").height();
    if($(e.target).hasClass("one-peach-site-toggle-large")){
      $(e.target).animate({
        left:0
      },500,()=>{
        $(e.target).removeClass("one-peach-site-toggle-large").addClass("one-peach-site-toggle").parents(".one-peach-site-detail").animate({
          right:"20px",
          bottom:"10px"
        },500);
        $(e.target).parents(".one-peach-site-detail").siblings(".one-peach-factorLegend").animate({
          right:"330px"
        },500);
      });
    }else{
      $(e.target).parents(".one-peach-site-detail").animate({
        right:"-300px",
        bottom:siteDetailHeight-64+"px"
      },1000,()=>{
        $(e.target).removeClass("one-peach-site-toggle").addClass("one-peach-site-toggle-large").animate({
          left:"-84px"
        },500);
      });
      $(e.target).parents(".one-peach-site-detail").siblings(".one-peach-factorLegend").animate({
        right:"20px"
      },1000);
    }

  }
  /**
   *鼠标离开隐藏下拉框并清除搜索的数据
   */
  mouseLeaveSelect(e){
    $(e.target).children('.one-peach-dropdown-menu').hide().prev().hide();
    this.activeSiteCode = '';
    this.siteSearchArr = [];
  }
  /**
   *上下键(完成)
   */
  keyUpOrDown(e){
    let activeIndex : number = 0;
    let activeSelectSite = $(e.target).parent().siblings(".one-peach-dropdown-menu").children(".active");
    if(activeSelectSite.length>0){
      activeIndex = activeSelectSite.index();
    }
    if(e.keyCode == "38"){
      activeIndex--;
      if(activeIndex<0){
        return false;
      }else{
        this.activeSiteCode = this.siteSearchArr[activeIndex].siteCode;
        let selfHeight = activeSelectSite.height()+6;
        let parentScrollTop = activeSelectSite.parent().scrollTop();
        $(activeSelectSite).parent().scrollTop(parentScrollTop-selfHeight);
      }
    }else if(e.keyCode == "40"){
      activeIndex++;
      if(activeIndex<this.siteSearchArr.length){
        this.activeSiteCode = this.siteSearchArr[activeIndex].siteCode;
        let selfHeight = activeSelectSite.height()+6;
        let parentScrollTop = activeSelectSite.parent().scrollTop();
        $(activeSelectSite).parent().scrollTop(parentScrollTop+selfHeight);
      }
    }else if(e.keyCode == "13"){
      if(activeIndex<this.siteSearchArr.length && activeIndex>=0){
        let activeSelectData = this.siteSearchArr[activeIndex];
        let point = new BMap.Point(activeSelectData.Longitude,activeSelectData.Latitude);
        this.siteSearchForm.patchValue({siteName:activeSelectData.siteName});
        $("#"+activeSelectData.siteCode).parent().addClass("one-map-marker-site-hint").siblings().removeClass("one-map-marker-site-hint");
        this.map.centerAndZoom(point,this.map.getZoom());
        this.siteSearchArr = [];
        this.activeSiteCode = "";
      }
    }
  }
  /**
   *地图缩放一个级别
   */
  zoomIn(){
    this.map.zoomIn();
  }
  zoomOut(){
    this.map.zoomOut();
  }
  /**
   *框选区域
   */
  regionAreaClick () {
    if (this.lastRegionAreaOverlay) {
      this.map.removeOverlay(this.lastRegionAreaOverlay);
      this.isSelectedArea = false;
      this.lastRegionAreaOverlay = '';
    }
    const myDrawingManagerObject = new BMapLib.DrawingManager(this.map, {
      isOpen: true,
      polygonOptions: {
        fillColor: '#eea77c',
        strokeColor: '#eea77c',
        strokeWidth: 2,
        fillOpacity: 0.28
      }
    });
    myDrawingManagerObject.setDrawingMode(BMAP_DRAWING_POLYGON);
    myDrawingManagerObject.open();
    myDrawingManagerObject.addEventListener('polygoncomplete', (e, overlay) =>{
      this.lastRegionAreaOverlay = overlay;
      this.getSelectAreaPoint();
    });
  }
  /**
   *清除框选区域信息
   */
  clearSelectAreaData(){
    if (this.lastRegionAreaOverlay) {
      this.map.removeOverlay(this.lastRegionAreaOverlay);
      this.isSelectedArea = false;
      this.lastRegionAreaOverlay = '';
      this.selectAreaData = {raiseDustNewSite:[],movingSource:[],industrySite:[]};
    }
  }
  /**
   *框选区域站点信息
   */
  getSelectAreaPoint () {
    let arrPoints: Array<any> = [];
    const latSets: Array<any> = [];
    const lngSets: Array<any> = [];
    if (this.lastRegionAreaOverlay) {
      arrPoints = this.lastRegionAreaOverlay.getPath();
      arrPoints.forEach((data, i) => {
        latSets.push(data.lat);
        lngSets.push(data.lng);
      });
    }
    let selectSitePointType: Array<string> = this.sitePointType.split(',');
    let pointType: Array<string> = [];
    if(selectSitePointType.indexOf('raiseDustNewSite')>-1){
      pointType.push('raiseDustNewSite');
    }
    if(selectSitePointType.indexOf('movingSource')>-1){
      pointType.push('movingSource');
    }
    if(selectSitePointType.indexOf('industrySite')>-1){
      pointType.push('industrySite');
    }
    const obj = {
      latSets: latSets.join(','),
      lngSets: lngSets.join(','),
      pointType: pointType.join(',')
    };
    this.realTimeService.getSelectAreaPoint(obj).subscribe(
      result => this.responseUtil.success(result, this.progressCarHistoryPoint),
      message => this.responseUtil.error(message)
    );
  }
  private progressCarHistoryPoint = (result: MsgResult) =>{
    if (result && result.code === MsgConstants.MSG_CODE_OK) {
      this.showSelectAreaInfo(result.data);
    } else if (result && result.code !== MsgConstants.MSG_CODE_OK) {
      this.dialogService.info(result.message);
    }
  }
  showSelectAreaInfo (data) {
    if(data.hasOwnProperty('raiseDustNewSite') &&　data.raiseDustNewSite.length > 0 ){
      this.selectAreaData.raiseDustNewSite = data.raiseDustNewSite;
    }
    if(data.hasOwnProperty('movingSource') &&　data.movingSource.length > 0 ){
      this.selectAreaData.movingSource = data.movingSource;
    }
    if(data.hasOwnProperty('industrySite') &&　data.industrySite.length > 0 ){
      this.selectAreaData.industrySite = data.industrySite;
    }
    this.isSelectedArea = true;
  }
}
